<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>S5: Test Drive</title>
<!-- metadata -->
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.3" />
<meta name="subject" content="S5 1.3beta7 (20-Apr-2007)" />
<meta name="author" content="Christian Effenberger" />
<meta name="company" content="Public Domain" />
<meta name="contributor" content="youcan[64]netzgesta[46]de" />
<meta name="publisher" content="s5.netzgesta.de" />
<meta name="description" content="S5 1.3 is a very flexible and lightweight slide show system available for anyone to use (including transitions and scalable fonts and images)" />
<meta name="keywords" content="S5, version 1.3, slide show, presentation-mode, projection-mode, powerpoint-like, scala-like, keynote-like, incremental display, scalable fonts, scalable images, transitions, notes, osf, xoxo, css, javascript, xhtml, public domain" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<!-- meta temporary -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- configuration transition extension -->
<meta name="tranSitions" content="true" />
<meta name="fadeDuration" content="500" />
<meta name="incrDuration" content="250" />
<!-- configuration autoplay extension -->
<meta name="autoMatic" content="false" />
<meta name="playLoop" content="true" />
<meta name="playDelay" content="10" />
<!-- configuration audio extension -->
<meta name="audioSupport" content="true" />
<meta name="audioVolume" content="100" />
<meta name="audioError" content="true" />
<!-- configuration audio debug -->
<meta name="audioDebug" content="true" />
<!-- style sheet links -->
<link rel="stylesheet" href="{{=URL('static','ui/default_utf/slides.css')}}" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="{{=URL('static','ui/default_utf/outline.css')}}" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="{{=URL('static','ui/default_utf/print.css')}}" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="{{=URL('static','ui/default_utf/opera.css')}}" type="text/css" media="projection" id="operaFix" />

<!-- embedded styles -->
<style type="text/css" media="all">
.media {float: left; margin-right: 1em;}
.imgcon {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 33%; height: 320px; position: relative;}
#anim img {position: absolute; top: 0px; left: 0px;}
.chart {margin: 0px; padding: 0px;}
td.trans { background-color:transparent; }
span.item { margin: 0; padding: 0; font-size: 1.5em; line-height: 0.75em;}
</style>
<!-- S5 JS -->
<script src="{{=URL('static','ui/default_utf/slides.js')}}" type="text/javascript"></script>
</head>
<body>

<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>S5 Advanced Test Drive</h1>
<h2>s5.netzgesta.de &#8226; 20-Apr-2007</h2>
</div>
</div>

<div class="presentation">

<object data="{{=URL('static','mp3/chillout.mp3')}}" archive="volume:50,loop" type="audio/mp3" class="handout" declare="declare" width="0" height="0"></object>

<div class="slide">
<h1>Web2py S5 Test Drive</h1>
<h3>Christopher Steel</h3>
<h4><a href="http://www.voiceofaccess.org/" rel="external">VoiceOfAccess.org</a></h4>
<h6><small>Background music is <em>"chillout.mp3"</em></small></h6>
<div class="handout"></div>
</div>

<div class="slide">
<h1>Scalable Images</h1>
<p>
<img class="scale media" width="184" height="184" src="{{=URL('static','pix/s5logo.png')}}" alt="" title="Simple Standards-based Slide Show System" />
Image scaling is based on window size. Use the <code>class</code> name <em>"scale"</em> to make your images scalable.
<em>"scale"</em> should always be the first class and the <code>&lt;img&gt;</code> tag must include <code>width</code> and <code>height</code> attributes.
Image dimension should fit for high resolution displays. Create your slides always in a browser window with inner width and height 
of <strong><a title="set inner dimension to 800&times;600" href="javascript:var%20iX=self.innerWidth;var%20iY=self.innerHeight;var%20oX=self.outerWidth;var%20oY=self.outerHeight;var%20gX=oX-iX;var%20gY=oY-iY;window.resizeTo(800+gX,600+gY);">800&times;600</a></strong>.
If your image is <em>(for example)</em> set to <strong>200&times;160</strong> it should be <strong>400&times;320</strong> to match even a maximum resolution of <strong>1600&times;1200</strong>.
<br style="clear:left;" /></p>
</div>

<div class="slide">
<h1>Scalable Incremental Images</h1>
<ul>
<li>Adoption of Web2py
<ul>
<li class="incremental">Not only the list items are incremental</li>
<li class="incremental">Even the chart bars are incremental</li>
<li class="incremental"><strong>Bar Chart</strong><br /><br />
<img class="scale chart" width="21" height="227" src="{{=URL('static','pix/vertical.png')}}" alt="ruler" />
<img class="scale incremental chart" width="71" height="227" src="{{=URL('static','pix/red.png')}}" alt="red" />
<img class="scale incremental chart" width="71" height="227" src="{{=URL('static','pix/blue.png')}}" alt="blue" />
<img class="scale incremental chart" width="71" height="227" src="{{=URL('static','pix/green.png')}}" alt="green" />
<img class="scale incremental chart" width="85" height="227" src="{{=URL('static','pix/yellow.png')}}" alt="yellow" /><br />
<img class="scale chart" width="318" height="21" src="{{=URL('static','pix/horizontal.png')}}" alt="ruler" />
</li>
<li><small>background music is <em>"easy.mp3"</em></small></li>
</ul>
</li>
</ul>
<object data="{{=URL('static','mp3/easy.mp3')}}" archive="volume:50,loop" type="audio/mp3" class="handout" declare="declare" width="0" height="0"></object>
</div>


<div class="slide">
<h1>Scalable Incremental Anims</h1>
<ul>
<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li>
</ul>
<p class="imgcon" id="anim">
<img class="scale" src="pix/mememe01.png" width="270" height="320" alt="" />
<img class="scale incremental" src="{{=URL('static','pix/mememe02.png')}}" width="270" height="320" alt="" />
<img class="scale incremental" src="{{=URL('static','pix/mememe03.png')}}" width="270" height="320" alt="" />
<img class="scale incremental" src="{{=URL('static','pix/mememe04.png')}}" width="270" height="320" alt="" />
<img class="scale incremental" src="{{=URL('static','pix/mememe05.png')}}" width="270" height="320" alt="" />
</p>
</div>



<div class="slide">
<h1>Scalable Flash</h1>
<p>
<object type="application/x-shockwave-flash" data="{{=URL('static','obj/flash/bluebirdie00.swf')}}" width="200" height="200" class="scale media" classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=6,0,0,0">
<param name="movie" value="{{=URL('static','obj/flash/bluebirdie00.swf')}}" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="bgcolor" value="#ffffff" />
</object>
Object scaling is based on window size. Use the <code>class</code> name <em>"scale"</em> to make your object scalable.
<em>"scale"</em> should always be the first class and the <code>&lt;object&gt;</code> tag must include <code>width</code> and <code>height</code> attributes.
Object dimension should fit for high resolution displays. Create your slides always in a browser window with inner width and height 
of <strong>800&times;600</strong>. If your object is <em>(for example)</em> set to <strong>200&times;200</strong> it should be <strong>400&times;400</strong> to match even a maximum resolution of <strong>1600&times;1200</strong>.
<br style="clear:left;" /></p>
</div>



<div class="slide">
<h1>Scalable Vector Graphics</h1>
<p>
<object data="{{=URL('static','obj/svg/sun.svg')}}" type="image/svg+xml" width="200" height="200" class="scale media">
<param name="src" value="{{=URL('static','obj/svg/sun.svg')}}" />
Browser is unable to view SVG!
</object>
Object scaling is based on window size. Use the <code>class</code> name <em>"scale"</em> to make your object scalable.
<em>"scale"</em> should always be the first class and the <code>&lt;object&gt;</code> tag must include <code>width</code> and <code>height</code> attributes.
Object dimension should fit for high resolution displays. Create your slides always in a browser window with inner width and height 
of <strong>800&times;600</strong>. If your object is <em>(for example)</em> set to <strong>200&times;200</strong> it should be <strong>400&times;400</strong> to match even a maximum resolution of <strong>1600&times;1200</strong>.
<br style="clear:left;" /></p>
</div>



<div class="slide">
<h1>Scalable Pie Chart</h1>
<br />
<table align="center" summary="dynamically generated canvas pie chart" border="0">
    <tr><td colspan="2" valign="top" align="center">
        <strong>Legend of Human Carnivors</strong>
    </td></tr><tr><td valign="top">
        <table id="piechart_data" summary="" class="piechart fs75" cellspacing="4" cellpadding="0" border="0">
            <tr><td class="col" bgcolor="#923033">&nbsp;&nbsp;&nbsp;&nbsp;</td><td align="right">Lamb:</td><td>66</td></tr>
            <tr><td class="col" bgcolor="#ad3c36">&nbsp;</td><td align="right">Beef:</td><td>99</td></tr>
            <tr><td class="col" bgcolor="#d16b6d">&nbsp;</td><td align="right">Pork:</td><td>15</td></tr>
            <tr><td class="col" bgcolor="#e89188">&nbsp;</td><td align="right">Chicken:</td><td>75</td></tr>
            <tr><td class="col" bgcolor="#f3b6a4">&nbsp;</td><td align="right">Fish:</td><td>22</td></tr>
            <tr><td>&nbsp;</td><td align="right">Total:</td><td><strong>277</strong></td></tr>
        </table>
    </td><td>
        <div><canvas id="piechart_canvas" width="360" height="360" class="scale"></canvas></div>
    </td></tr>  
</table>
</div>


<div class="slide">
<h1>Pie Chart (img text)</h1>
<br />
<table align="center" summary="dynamically generated canvas pie chart" border="0">
    <tr><td colspan="2" valign="top" align="center">
        <strong>Landmasses on Earth</strong>
    </td></tr><tr><td valign="top">
        <div><canvas id="piechart2_canvas" width="360" height="360" class="scale"></canvas></div>
    </td><td valign="top" >
        <table id="piechart2_data" summary="imgtext" class="piechart fs66" cellspacing="4" cellpadding="0" border="0">
            <tr><th colspan="2" align="right">Continent</th><th>%</th></tr>
            <tr><td class="col" bgcolor="#ff0000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td align="right">N-America:</td><td>24</td></tr>
            <tr><td class="col" bgcolor="#ff5500">&nbsp;</td><td align="right">S-America:</td><td>19</td></tr>
            <tr><td class="col" bgcolor="#ffaa00">&nbsp;</td><td align="right">Asia:</td><td>19</td></tr>
            <tr><td class="col" bgcolor="yellow">&nbsp;</td><td align="right">Africa:</td><td>14</td></tr>
            <tr><td class="col" bgcolor="#aaff00">&nbsp;</td><td align="right">Australia:</td><td>14</td></tr>
            <tr><td class="col" bgcolor="#aacc00">&nbsp;</td><td align="right">Europe:</td><td>10</td></tr>
        </table>
    </td></tr>  
</table>
</div>


<div class="slide">
<h1>Pie Chart (html text)</h1>
<br />
<table align="center" summary="dynamically generated canvas pie chart" border="0">
    <tr><td colspan="2" valign="top" align="center">
        <strong>Colorful Demo Chart</strong>
    </td></tr><tr><td valign="top">
        <table id="piechart3_data" summary="noshade,noshadow,htmltext" class="piechart fs50" cellspacing="4" cellpadding="0" border="0">
            <tr><td class="trans" bgcolor="red"><span class="item" style="color: red;">&#x25b6;</span></td><td align="right">Item-A:</td><td>10</td></tr>
            <tr><td class="trans" bgcolor="lime"><span class="item" style="color: lime;">&#x25b6;</span></td><td align="right">Item-B:</td><td>9</td></tr>
            <tr><td class="trans" bgcolor="blue"><span class="item" style="color: blue;">&#x25b6;</span></td><td align="right">Item-C:</td><td>8</td></tr>
            <tr><td class="trans" bgcolor="yellow"><span class="item" style="color: yellow;">&#x25b6;</span></td><td align="right">Item-D:</td><td>7</td></tr>
            <tr><td class="trans" bgcolor="fuchsia"><span class="item" style="color: fuchsia;">&#x25b6;</span></td><td align="right">Item-E:</td><td>6</td></tr>
            <tr><td class="trans" bgcolor="aqua"><span class="item" style="color: aqua;">&#x25b6;</span></td><td align="right">Item-F:</td><td>5</td></tr>
            <tr><td class="trans" bgcolor="white"><span class="item" style="color: white;">&#x25b6;</span></td><td align="right">Item-G:</td><td>4</td></tr>
            <tr><td class="trans" bgcolor="silver"><span class="item" style="color: silver;">&#x25b6;</span></td><td align="right">Item-h:</td><td>3</td></tr>
            <tr><td class="trans" bgcolor="gray"><span class="item" style="color: gray;">&#x25b6;</span></td><td align="right">Item-I:</td><td>2</td></tr>
            <tr><td class="trans" bgcolor="dimgray"><span class="item" style="color: dimgray;">&#x25b6;</span></td><td align="right">Item-J:</td><td>1</td></tr>
        </table>
    </td><td>
        <div><canvas id="piechart3_canvas" width="320" height="320" class="scale"></canvas></div>
    </td></tr>  
</table>
</div>

<div class="slide">
<h1>Incremental Pie Charts</h1>
<br />
<table align="center" summary="dynamically generated canvas pie charts" class="fs50" border="0">
    <tr><td align="center">
        <div><canvas id="pie0_canvas" width="200" height="200" class="scale incremental"></canvas></div>
        <table id="pie0_data" summary="" class="piechart hide" border="0">
            <tr><td bgcolor="blue"></td><td>x</td><td>25</td></tr>
            <tr><td bgcolor="red"></td><td>y</td><td>75</td></tr>
        </table>
    </td><td align="center">
        <div><canvas id="pie1_canvas" width="200" height="200" class="scale incremental"></canvas></div>
        <table id="pie1_data" summary="" class="piechart hide" border="0">
            <tr><td bgcolor="blue"></td><td>x</td><td>33.333333</td></tr>
            <tr><td bgcolor="red"></td><td>y</td><td>66.666666</td></tr>
        </table>
    </td><td align="center">
        <div><canvas id="pie2_canvas" width="200" height="200" class="scale incremental"></canvas></div>
        <table id="pie2_data" summary="" class="piechart hide" border="0">
            <tr><td bgcolor="blue"></td><td>x</td><td>50</td></tr>
            <tr><td bgcolor="red"></td><td>y</td><td>50</td></tr>
        </table>
    </td></tr>  
    <tr><td align="center">
        <div><canvas id="pie3_canvas" width="200" height="200" class="scale incremental"></canvas></div>
        <table id="pie3_data" summary="" class="piechart hide" border="0">
            <tr><td bgcolor="blue"></td><td>x</td><td>66.666666</td></tr>
            <tr><td bgcolor="red"></td><td>y</td><td>33.333333</td></tr>
        </table>
    </td><td align="center">
        <div><canvas id="pie4_canvas" width="200" height="200" class="scale incremental"></canvas></div>
        <table id="pie4_data" summary="" class="piechart hide" border="0">
            <tr><td bgcolor="blue"></td><td>x</td><td>75</td></tr>
            <tr><td bgcolor="red"></td><td>y</td><td>25</td></tr>
        </table>
    </td><td align="center">
        <div><canvas id="pie5_canvas" width="200" height="200" class="scale incremental"></canvas></div>
        <table id="pie5_data" summary="" class="piechart hide" border="0">
            <tr><td bgcolor="blue"></td><td>x</td><td>100</td></tr>
        </table>
    </td></tr>  
</table>
</div>


<div class="slide">
<h1>[slide title]</h1>

<ul>
<li>[point one]</li>
<li>[point two]</li>
<li>[point three]</li>
<li>[point four]</li>
<li>[point five]</li>
</ul>

<div class="handout">
[any material that should appear in print but not on the slide]
</div>

<div class="notes">
[any material that should appear in notes window but not on the slide]
</div>


</div>

</body>
</html>
